<template>
  <div>
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="8">事项编号：{{ childmessage.number }}</el-col>
      <el-col :span="2"></el-col>
      <el-col :span="8">上报人：{{ childmessage.reportPerson }}</el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="8">上报时间：{{ childmessage.createTime }}</el-col>
      <el-col :span="2"></el-col>
      <el-col :span="8" style="cursor: pointer" @click.native="openClik"
        >事件地点：<i class="el-icon-map-location" style="font-size: 20px"></i> {{ childmessage.location }}
      </el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="8">上报人所属网格：{{ childmessage.grid }}</el-col>
      <el-col :span="2"></el-col>
      <el-col :span="8">上报人电话：{{ childmessage.reportPhone | PhoneFormat }}</el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="8">问题类型：{{ childmessage.subTypeName }}</el-col>
      <el-col :span="2"></el-col>
      <el-col :span="8">问题描述：{{ childmessage.mdescribe }}</el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="8">事项状态：{{ childmessage.statusName }}</el-col>
      <el-col :span="2"></el-col>
      <el-col :span="8">事件来源：{{ childmessage.matterSourceName }}</el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="center" v-show="childmessage.voice">
      <el-col :span="9">
        音频文件：<audio
          ref="audio"
          :src="childmessage.voice"
          autoplay="autoplay"
          preload="auto"
          controls="controls"
        ></audio>
      </el-col>
      <el-col :span="1"></el-col>
      <el-col :span="8"> </el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="3">图片证明：</el-col>
      <el-col :span="5">
        <el-image
          style="width: 120px; height: 120px"
          :src="childmessage.preImgList[0]"
          :preview-src-list="childmessage.preImgList"
        >
        </el-image
      ></el-col>
      <el-col :span="5"
        ><el-image
          style="width: 120px; height: 120px"
          :src="childmessage.preImgList[1]"
          :preview-src-list="childmessage.preImgList"
          v-show="childmessage.preImgList[1]"
        >
        </el-image
      ></el-col>
      <el-col :span="5"
        ><el-image
          style="width: 120px; height: 120px"
          :src="childmessage.preImgList[2]"
          :preview-src-list="childmessage.preImgList"
          v-show="childmessage.preImgList[2]"
        >
        </el-image
      ></el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="8">
        操作：
        <el-radio style="margin-left: 10px" v-model="postdata.status" label="6">派遣</el-radio>
        <el-radio v-if="childmessage.matterSource == 2" v-model="postdata.status" label="5">研判</el-radio>
        <el-radio v-else v-model="postdata.status" label="3">退回核实</el-radio>
      </el-col>
      <el-col :span="2"></el-col>
      <el-col :span="8" v-show="postdata.status == 3"></el-col>
      <el-col :span="8" v-show="postdata.status == 5">
        <div v-show="postdata.status == 5 && childmessage.matterSource == 2">
          研判原因：
          <el-select v-model="postdata.determine" placeholder="请选择" size="small" @change="depaChange">
            <el-option label="非火情" value="非火情"></el-option>
            <el-option label="重复火情" value="重复火情"></el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="8" v-show="postdata.status == 6">
        <div>
          派向部门：
          <el-select v-model="depaId" placeholder="请选择" size="small" @change="depaChange">
            <el-option v-for="item in options" :key="item.id" :label="item.roleName" :value="item.id"> </el-option>
          </el-select>
        </div>
        <div>派向人员：{{ assignedUser }}</div>
      </el-col>
    </el-row>
    <div v-if="depaId || postdata.status == 6">
      <div v-if="depaUser.length">
        <div v-if="!seleUser.fullName" class="depaBoxTisp">请选择指定人员</div>
      </div>
      <div v-else class="depaBoxTisp">此部门没有负责这个地点的人员</div>
    </div>
    <el-row type="flex" class="row-bg" justify="center" v-show="postdata.status == 3 || postdata.status == 5">
      <el-col v-if="childmessage.matterSource == 2" :span="3">研判描述：</el-col>
      <el-col v-else :span="3">退回原因：</el-col>
      <el-col :span="6"
        ><el-input
          type="textarea"
          :rows="5"
          placeholder="请限制字数在50个以内"
          maxlength="50"
          show-word-limit
          resize="none"
          v-model="postdata.returncause"
        >
        </el-input
      ></el-col>
      <el-col :span="3"></el-col>
      <el-col :span="6"></el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="10">
        <div :class="{ timeBox: true, hideBox: timeHide }">
          <el-timeline :reverse="true">
            <el-timeline-item v-for="(activity, index) in process" :key="index" :timestamp="activity.time">
              {{ activity.clue }}
            </el-timeline-item>
          </el-timeline>
        </div>
        <div v-if="process.length > 2" class="more" @click="timeMore">
          <i :class="timeHide ? 'el-icon-caret-bottom' : 'el-icon-caret-top'"></i> 查看更多
        </div>
      </el-col>
      <el-col :span="10"></el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="8"></el-col>
      <el-col :span="2"><el-button type="primary" @click="check">提交</el-button></el-col>
      <el-col :span="8"></el-col>
    </el-row>
    <el-dialog :append-to-body="true" top="30px" :visible.sync="centerDialogVisible" width="80%" center>
      <BDmap v-if="centerDialogVisible" :childmessage="message" :locations="location"></BDmap>
    </el-dialog>
    <el-dialog title="选择人员" :visible.sync="seleDialog" :modal="false">
      <div class="depaUserBox">
        <div v-if="depaUser.length">
          <div
            v-for="item in depaUser"
            :key="item.id"
            :class="{ useritem: true, active: item.active }"
            @click="depaUserClick(item.id)"
          >
            <img :src="item.avatar" alt="" class="userImg" />
            <div class="userName"><i v-if="item.active" class="el-icon-success"></i>{{ item.fullName }}</div>
          </div>
        </div>
        <div v-else class="depaTisp">此部门没有负责这个地点的人员</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Seats from '@/api/Seats'
import api from '@/api/api'
import { PhoneFormat } from '@/utils/pipe'
export default {
  props: {
    childmessage: {
      type: Object,
      default() {
        return {}
      },
    },
    winState: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value == '') {
        callback(new Error('该项不能为空！'))
      } else {
        if (value !== '') {
          callback()
        }
      }
    }
    return {
      message: {},
      location: '',
      show: false,
      centerDialogVisible: false,
      radio: '1',
      Arrs: {},
      options: [],
      close: false,
      event: 1,
      depaId: null,
      postdata: {
        matterId: '',
        responsibilityId: null,
        status: '6',
        returncause: '',
        determine: '',
      },
      rules: {
        status: [{ required: true, validator: validatePass, trigger: 'blur' }],
      },
      process: [],
      timeHide: true,
      depaUser: [],
      seleUser: {},
      seleDialog: false,
      assignedUser: '',
      determine: '',
    }
  },

  watch: {
    winState: function (e) {
      if (e) {
        this.getclue()
      } else {
        this.depaId = null
        this.postdata.returncause = ''
        this.postdata.responsibilityId = null
        this.seleUser = {}
        this.assignedUser = ''
      }
    },
  },
  created() {
    this.getclue()
    Seats.role({}).then(res => {
      if (res.code == 200) {
        this.options = res.data
      }
    })
  },
  methods: {
    async openClik() {
      this.location = this.childmessage.location
      await Seats.convert(this.childmessage.latitude, this.childmessage.longitude).then(e => {
        if (e != {} || e != undefined) {
          this.message.lat = e.lat
          this.message.lng = e.lng
          this.centerDialogVisible = true
        }
      })
    },
    getclue() {
      api.getclue({ matterId: this.childmessage.matterId }).then(res => {
        if (res.code == 200) {
          this.process = res.data
        }
      })
    },
    check() {
      if (this.postdata.status == 3 && this.postdata.returncause == '') {
        this.$message({
          message: '退回原因不能为空！',
          type: 'error',
        })
      } else if (this.postdata.status == 3) {
        this.sentmessage()
      } else if (this.postdata.status == 6 && this.postdata.responsibilityId == null) {
        this.$message({
          message: '请选择派向部门人员',
          type: 'error',
        })
      } else if (this.postdata.status == 6) {
        this.sentmessage()
      } else if (this.postdata.status == 5 && !this.postdata.determine) {
        this.$message({
          message: '请选择研判原因',
          type: 'error',
        })
      } else if (this.postdata.status == 5) {
        this.sentmessage()
      }
    },
    sentmessage() {
      this.postdata.matterId = this.childmessage.matterId
      api.Submit(JSON.stringify(this.postdata)).then(res => {
        if (res.code == 200) {
          this.seleUser = {}
          this.postdata.returncause = ''
          this.postdata.responsibilityId = null
          this.postdata.status = '6'
          this.$emit('postmessage', this.event)
          this.$parent.$parent.Tip()
        }
      })
    },
    timeMore() {
      this.timeHide = !this.timeHide
    },
    depaChange(id) {
      this.seleUser = {}
      this.postdata.responsibilityId = null
      let data = {
        lat: this.childmessage.latitude,
        lng: this.childmessage.longitude,
        roleId: id,
      }
      Seats.dutyGridAnalysis(data).then(res => {
        if (res.code == 200) {
          res.data.forEach(item => {
            item.active = false
          })
          this.depaUser = res.data
          if (res.data.length) {
            this.seleDialog = true
          }
        }
      })
    },
    depaUserClick(id) {
      this.seleDialog = false
      this.postdata.responsibilityId = id
      this.depaUser.forEach(item => {
        if (item.id === id) {
          this.seleUser = item
          this.assignedUser = item.fullName
          item.active = true
        } else {
          item.active = false
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.el-row {
  font-size: 14px;
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
  div {
    box-sizing: border-box;
  }
}

.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
}
.timeBox {
  ::v-deep .el-timeline-item__content {
    line-height: 2;
  }
}
.hideBox {
  height: 120px;
  overflow: hidden;
}
.more {
  padding: 10px 0;
  text-align: center;
  cursor: pointer;
}
.depaFlex {
  display: flex;
  justify-content: center;
}
.depaUserBox {
  border: solid 1px #e9e9e9;
  border-radius: 5px;
  padding: 18px 8px;
  margin: 0 auto;
  .useritem {
    display: inline-block;
    border: solid 1px #e9e9e9;
    border-radius: 5px;
    width: 100px;
    box-sizing: border-box;
    padding: 10px;
    margin: 0 10px 10px;
    box-shadow: 0px 5px 5px #e5e5e5;
    cursor: pointer;
    &:hover {
      background-color: rgb(245, 245, 245);
    }
    &.active {
      i {
        font-size: 12px;
        color: rgb(0 195 130);
      }
    }
    .userImg {
      display: inline-block;
      width: 80px;
      height: 80px;
    }
    .userName {
      text-align: center;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .depaTisp {
    font-size: 14px;
    color: #8d8d8d;
  }
}
.depaBoxTisp {
  width: 400px;
  border: solid 1px #e9e9e9;
  text-align: center;
  border-radius: 5px;
  padding: 18px 8px;
  margin: 0 auto;
  font-size: 14px;
  color: #8d8d8d;
}
</style>
